<template>
  <div>
    <h1>诊断列表</h1>
    <el-select v-model="selectedStatus" placeholder="选择诊断状态" @change="filterDiagnoses">
      <el-option v-for="status in diagnosisStatuses" :key="status" :label="status" :value="status"></el-option>
    </el-select>
    <el-table :data="pagedDiagnoses" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="diagnosisId" label="诊断ID"></el-table-column>
      <el-table-column prop="diagnosisNumber" label="诊断编号"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="patientName" label="病人姓名"></el-table-column>
      <el-table-column prop="department" label="科室"></el-table-column>
      <el-table-column prop="bedNumber" label="床号"></el-table-column>
      <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="content" label="内容" visable = false></el-table-column>
      <el-table-column prop="medicine" label="药品"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="diagnosisStatus" label="诊断状态"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="showReport(scope.row)">查看报告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="filteredDiagnoses.length"
      :page-size="pageSize"
      @current-change="handlePageChange"
      style="margin-top: 20px;">
    </el-pagination>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <div ref="reportContent">
        <h2>诊断报告单</h2>
        <p><strong>诊断ID: </strong>{{ selectedDiagnosis.diagnosisId }}</p>
        <p><strong>诊断编号：</strong>{{ selectedDiagnosis.diagnosisNumber }}</p>
        <p><strong>标题：</strong>{{ selectedDiagnosis.title }}</p>
        <p><strong>病人姓名：</strong>{{ selectedDiagnosis.patientName }}</p>
        <p><strong>科室：</strong>{{ selectedDiagnosis.department }}</p>
        <p><strong>床号：</strong>{{ selectedDiagnosis.bedNumber }}</p>
        <p><strong>负责人：</strong>{{ selectedDiagnosis.responsiblePerson }}</p>
        <p><strong>时间：</strong>{{ selectedDiagnosis.time }}</p>
        <p><strong>内容：</strong>{{ selectedDiagnosis.content }}</p>
        <p><strong>药品：</strong>{{ selectedDiagnosis.medicine }}</p>
        <p><strong>金额：</strong>{{ selectedDiagnosis.amount }}</p>
        <p><strong>诊断状态：</strong>{{ selectedDiagnosis.diagnosisStatus }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawer = false">关闭</el-button>
        <el-button type="primary" @click="downloadReport">下载PDF</el-button>
      </span>
    </el-drawer>

  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElTable, ElTableColumn, ElSelect, ElOption, ElPagination, ElDialog, ElButton } from 'element-plus';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  name: 'DiagnosisList',
  components: {
    ElTable,
    ElTableColumn,
    ElSelect,
    ElOption,
    ElPagination,
    ElDialog,
    ElButton,
  },
  data() {
    return {
      drawer: false,
      diagnoses: [],
      filteredDiagnoses: [],
      pagedDiagnoses: [],
      selectedStatus: '',
      diagnosisStatuses: ['新开单', '待诊断', '已取消', '已完成','已暂停'],
      currentPage: 1,
      pageSize: 10,
      reportDialogVisible: false,
      selectedDiagnosis: {},
    };
  },
  created() {
    this.fetchDiagnoses();
  },
  methods: {
    async fetchDiagnoses() {
      try {
        const response = await axios.get('http://localhost:8085/api/diagnosis/getByPatientName', {
          params: {
            patientName: this.$store.state.userName,
          }
        });
        if (response.data.code === 1) {
          this.diagnoses = response.data.data;
          this.filterDiagnoses();
        } else {
          ElMessage.error('获取诊断数据失败');
        }
      } catch (error) {
        ElMessage.error('获取诊断数据失败');
      }
    },
    filterDiagnoses() {
      if (this.selectedStatus) {
        this.filteredDiagnoses = this.diagnoses.filter(diagnosis => diagnosis.diagnosisStatus === this.selectedStatus);
      } else {
        this.filteredDiagnoses = this.diagnoses;
      }
      this.handlePageChange(1);
    },
    handlePageChange(page) {
      this.currentPage = page;
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.pagedDiagnoses = this.filteredDiagnoses.slice(start, end);
    },
    showReport(diagnosis) {
      this.selectedDiagnosis = diagnosis;
      this.drawer = true;
    },
    async downloadReport() {
      const reportContent = this.$refs.reportContent;
      const canvas = await html2canvas(reportContent);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 10, 10);
      pdf.save('diagnosis-report.pdf');
    },
  },
};
</script>

<style scoped>
</style>
